<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0, user-scalable=0">
  <title>瀑布流实践</title>
  <style>
    /* css样式 */
    body {
      background: #e5e5e5;
    }

    /* 瀑布流最外层 */
    #root {
      column-count: 5;
      column-width: auto;
      column-gap: 20px;
    }

    /* 每一列图片包含层 */
    .item {
      margin-bottom: 1rem;
      /* 防止多列布局，分页媒体和多区域上下文中的意外中断 */
      break-inside: avoid;
      background: #fff;
      border-radius: 8px;
    }

    .item:hover {
      box-shadow: 2px 2px 2px rgba(0, 0, 0, .5);
    }

    /* 图片 */
    .itemImg {
      width: 100%;
      vertical-align: middle;
      border-radius: 8px;
    }

    /* 图片下的信息包含层 */
    .userInfo {
      padding: 5px 10px;
    }

    .avatar {
      vertical-align: middle;
      width: 30px;
      height: 30px;
      border-radius: 50%;
    }

    .username {
      margin-left: 5px;
      color: #555;
      text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
    }

    @media screen and (max-width: 750px) {
      #root{
        column-count: 2;
        column-gap: 10px;
      }
    }
  </style>
</head>
<body>
哈哈哈哈
<!-- 使用multi-columns实现瀑布流 -->
<div id="root">
  <div class="item">
    <img class="itemImg" src="../static/p-cake4.jpg" alt=""/>
    <div class="userInfo">
      <img class="avatar" src="../static/icon-heart.png" alt=""/>
      <span class="username">飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞</span>
    </div>
  </div>
  <div class="item">
    <img class="itemImg" src="../static/p-iceream.jpg" alt=""/>
    <div class="userInfo">
      <img class="avatar" src="../static/icon-salad.png" alt=""/>
      <span class="username">飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞</span>
    </div>
  </div>
  <div class="item">
    <img class="itemImg" src="../static/p-cake5.jpg" alt=""/>
    <div class="userInfo">
      <img class="avatar" src="../static/icon-salad.png" alt=""/>
      <span class="username">飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞</span>
    </div>
  </div>
  <div class="item">
    <img class="itemImg" src="../static/p-water2.png" alt=""/>
    <div class="userInfo">
      <img class="avatar" src="../static/icon-salad.png" alt=""/>
      <span class="username">飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞</span>
    </div>
  </div>
  <div class="item">
    <img class="itemImg" src="../static/bg-panda.jpg" alt=""/>
    <div class="userInfo">
      <img class="avatar" src="../static/icon-salad.png" alt=""/>
      <span class="username">温暖如晨光</span>
    </div>
  </div>
  <div class="item">
    <img class="itemImg" src="../static/p-water.jpg" alt=""/>
    <div class="userInfo">
      <img class="avatar" src="../static/icon-salad.png" alt=""/>
      <span class="username">飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞</span>
    </div>
  </div>

  <div class="item">
    <img class="itemImg" src="../static/p-cake.jpg" alt=""/>
    <div class="userInfo">
      <img class="avatar" src="../static/icon-salad.png" alt=""/>
      <span class="username">飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞</span>
    </div>
  </div>

  <div class="item">
    <img class="itemImg" src="../static/p-cake2.jpg" alt=""/>
    <div class="userInfo">
      <img class="avatar" src="../static/icon-salad.png" alt=""/>
      <span class="username">飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞</span>
    </div>
  </div>

  <div class="item">
    <img class="itemImg" src="../static/p-lemon.jpg" alt=""/>
    <div class="userInfo">
      <img class="avatar" src="../static/icon-salad.png" alt=""/>
      <span class="username">飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞飞</span>
    </div>
  </div>
</div>

</body>
</html>
